<template>
	<view class="gsysfs">
		<view class="gsysf">
			<view class="geinsiisd" v-for="(item,index) in giantList" :key="index">
				<view class="rowsadsadasf">
					<view class="rowsadsadasfs">
						记录时间
					</view>
					<view class="rowsadsadasfss">
						{{item.followTime}}
					</view>
				</view>
				<view class="rowsadsadasf" style="margin-top: 28rpx;">
					<view class="rowsadsadasfs">
						客户情况
					</view>
					<view class="rowsadsadasfss">
				      {{item.remark}}
					</view>
				</view>
				<view class="rowsadsadasf" style="margin-top: 28rpx;">
					<view class="rowsadsadasfs">
						备注
					</view>
					<view class="rowsadsadasfss">
				      {{item.bz == null ? '尚未填写备注~~' : item.bz}}
					</view>
				</view>
			</view>
			<view class="lisrsimage" v-if="giantList.length < 0 || giantList.length == 0">
				<image src="https://star.googom.cn/chuangge/zanwuenirong.png" mode="widthFix"></image>
				<text>暂无记录</text>
			</view>
			<view class="bolck"></view>
			<view class="good_detil_navigationBar">
				<view class="cgouimai" @click="opens">
					添加记录
				</view>
			</view>
		</view>
		<!-- 记录时间 -->
		<u-datetime-picker :show="show" v-model="value1" mode="datetime" ref="datetimePicker" @confirm="confirm"
			@close="show=false" :closeOnClickOverlay="true" :closeOnClickAction="true" @cancel="cancel"
			:formatter="formatter" :maxDate="Number(new Date())"></u-datetime-picker>
		<!-- 新增记录 -->
		<u-popup :show="showyx" :round="10" mode="bottom" @close="close" @open="opens" :closeable="true" style="z-index: 9;">
			<view class="tipPopup_titless">添加记录</view>
			<view class="rowsadsadasf" @click="getguanhf">
				<view class="rowsadsadasfs">
					记录时间
				</view>
				<view class="rowsadsadasfss">
					{{dayinfasd == undefined || dayinfasd == '' ? '请选择记录时间' : dayinfasd}}
				</view>
			</view>
			<view class="shujusdfs" style="height: 222rpx;">
				<view class="touxiang">
					客户情况
				</view>
				<view class="touxiangsd" style="padding-right: 24rpx;box-sizing: border-box;width: 563rpx;margin-top: 40rpx;">
					<u-textarea v-model="beizhu" border='none'  placeholder="请填写客户问题描述提供更好的服务"
						ref="textarea"></u-textarea>
				</view>
			</view>
			<view class="shujusdfs" style="height: 222rpx;">
				<view class="touxiang">
					备注
				</view>
				<view class="touxiangsd" style="padding-right: 24rpx;box-sizing: border-box;width: 563rpx;margin-top: 40rpx;">
					<u-textarea v-model="bz" border='none'  placeholder="请填写备注"
						ref="textarea"></u-textarea>
				</view>
			</view>
			<view class="baiocuyn" @click="getyixiangd">
				确定
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				ids:0,
				pageNum:1,
				projectnameid:0,
				giantList:[],
				showyx:false,
				dayinfasd:'',
				beizhu:'',
				bz:''
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onPullDownRefresh() {
			var that = this
			that.pageNum = 1
			that.getfollowlists();
		},
		onReachBottom() {
			var that = this
			that.pageNum++
			that.getfollowlists();
		},
		onLoad(option) {
			this.ids = option.id
		},
		onShow() {
			this.projectnameid = uni.getStorageSync('projectnameid');
			//查询跟进记录表
			this.getfollowlists()
		},
		methods: {
			//新增记录
			getyixiangd(){
				if(this.dayinfasd == undefined || this.dayinfasd == ''){
					uni.showToast({
						title: '请选择记录时间',
						icon: 'none'
					})
				}else if(this.beizhu == ''){
					uni.showToast({
						title: '请填写客户情况',
						icon: 'none'
					})
				}else{
					this.getyixiangdss()
				}
			},
			//新增记录
			async getyixiangdss(){
				var that = this
				let data = await that.$api.getfollow({
					followCustomerId:that.ids,
					projectId:that.projectnameid,
					followTime:that.dayinfasd+':00',
					remark:that.beizhu,
					bz:that.bz
				});
				if (data.code == 200) {
					that.showyx = false
					uni.showToast({
						title: '新增成功',
						icon: 'none'
					})
					that.pageNum = 1
					that.dayinfasd = ''
					that.beizhu = ''
					that.bz = ''
					that.getfollowlists()
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//打开时间选择器
			getguanhf(){
				this.show = true
				this.showyx = false
			},
			//打开新增记录
			opens() {
				this.showyx = true
			},
			//关闭新增记录
			close() {
				this.showyx = false
			},
			//选择时间
			confirm(e) {
				this.show = false
				this.result(e.value, e.mode)
			},
			cancel() {
				this.show = false
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				const data = timeFormat(time, 'yyyy-mm-dd  hh:MM')
				let str = data;
				this.showyx = true
				this.dayinfasd = str
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			//查询跟进记录表
			async getfollowlists() {
				var that = this
				let data = await that.$api.getfollowlist({
					pageNum:that.pageNum,
					pageSize:10,
					followCustomerId:that.ids,
					projectId:that.projectnameid
				});
				uni.stopPullDownRefresh()
				if (data.code == 200) {
					that.giantList = [...that.giantList, ...data.rows]
					const uniqueArr = [];
					const map = new Map();
					for (const item of that.giantList) {
						if (!map.has(item.id)) {
							map.set(item.id, true);
							uniqueArr.push(item);
						}
					}
					that.giantList = uniqueArr
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gsysfs{
		width: 100%;
		height: 100vh;
		background-color: #F5F7FB;
	}
	.gsysf{
		width: 100%;
		padding-top: 20rpx;
		box-sizing: border-box;
		background-color: #F5F7FB;
	}
	.geinsiisd{
		width: 702rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-left: 24rpx;
		margin-bottom: 20rpx;
		padding-top: 28rpx;
		padding-bottom: 28rpx;
		box-sizing: border-box;
	}
	.good_detil_navigationBar {
		width: 750rpx;
		height: 140rpx;
		opacity: 1;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 99;
	
		.cgouimai {
			width: 702rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: #05CF67;
			box-sizing: border-box;
			border: 1rpx solid #05CF67;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 24rpx;
			margin-bottom: 25rpx;
		}
	}
	.tipPopup_titless {
		width: 100%;
		height: 70rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: #FFFFFF;
		text-align: center;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
		font-weight: 600;
		font-size: 34rpx;
	}
	
	
	.baiocuyn {
		width: 702rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background: #05CF67;
		margin-left: 24rpx;
		margin-top: 80rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	.rowsadsadasf{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.rowsadsadasfs{
			width: 160rpx;
			height: 40rpx;
			font-size: 30rpx;
			color: #08112C;
			margin-left: 24rpx;
		}
		.rowsadsadasfss{
			width: 470rpx;
			font-size: 30rpx;
			color: #08112C;
			margin-left: 32rpx;
		}
	}
	.shujusdfs {
		width: 702rpx;
		height: 96rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	
		.touxiang {
			width: 160rpx;
			height: 40rpx;
			font-size: 30rpx;
			color: #08112C;
	
			text {
				font-size: 30rpx;
				color: #FF4D4F;
			}
		}
	
		.touxiangsd {
			width: 465rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
	
			.onpus {
				width: 465rpx;
				font-size: 30rpx;
				color: #7C849C;
			}
	
			.onpuss {
				width: 465rpx;
				font-size: 30rpx;
				color: #08112C;
			}
		}
	
		.touxiangssd {
			width: 250rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
	
			.xuansda {
				width: 250rpx;
				font-size: 30rpx;
				color: #7C849C;
			}
	
			.xuansdas {
				width: 250rpx;
				font-size: 30rpx;
				color: #08112C;
			}
		}
	
		.xialsd {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
	}
	::v-deep .u-textarea {
		background: rgba(245, 246, 248, 1) !important;
	}
	
	::v-deep .u-textarea__count {
		bottom: -22rpx;
		background: rgba(245, 246, 248, 1) !important;
	}
</style>
